<template>
  <div class="">
    <el-form ref="ruleForm" label-position="left" :model="ruleForm" status-icon :rules="rules" label-width="100px">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span><b>应用申请相关人员</b></span>
        </div>
        <div>
          <el-form-item  label-width="150px" label="申请应用项目名称" prop="instance_name">
            <el-input v-model="ruleForm.instance_name" clearable autocomplete="off" style="width: 300px" />
          </el-form-item>
          <el-form-item label-width="150px" label="申请人" prop="apply_member">
            <el-input v-model="ruleForm.apply_member" clearable autocomplete="off" style="width: 300px" />
          </el-form-item>
          <el-form-item label-width="150px" label="负责人" prop="responsible_member">
            <el-input v-model="ruleForm.responsible_member" clearable autocomplete="off" style="width: 300px" />
          </el-form-item>
        </div>
      </el-card>
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span><b>申请环境</b></span>
        </div>
        <div>
          <el-form-item label="云环境" prop="zone">
            <el-radio-group v-model="ruleForm.zone">
              <el-radio label="private">私有云</el-radio>
              <el-radio label="tencent">腾讯云</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="应用环境" prop="env">
            <el-select v-model="ruleForm.env" clearable placeholder="环境">
              <el-option
                v-for="item in envList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-card>
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span><b>申请应用服务</b></span>
        </div>
        <div>
          <el-form-item label="APP服务" prop="app">
            <el-checkbox-group v-model="ruleForm.app" clearable placeholder="选择申请应用">
              <el-checkbox v-for="app in appList" :key="app.label" :label="app.value">{{ app.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <template v-if="ruleForm.app.includes('vue')">
                <el-form-item label="前端应用名称" prop="apppname_front">
                  <el-input v-model="ruleForm.app_name.frontend" clearable autocomplete="off" style="width: 300px" placeholder="请输入名称" />
                </el-form-item>
              </template>
            </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <template v-if="ruleForm.app.includes('tomcat')">
              <el-form-item label="后端应用名称" prop="appname_backend">
                <el-input v-model="ruleForm.app_name.backend" clearable autocomplete="off" style="width: 300px" placeholder="请输入名称" />
              </el-form-item>
            </template>
          </div>
          </el-col>
        </el-row>

        <div>
          <el-form-item label="缓存服务" prop="cache">
            <el-checkbox-group v-model="ruleForm.cache" clearable placeholder="选择缓存服务">
              <el-checkbox v-for="app in cacheList" :key="app.label" :label="app.value">{{ app.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="消息中间件" prop="msg_middleware">
            <el-checkbox-group v-model="ruleForm.msg_middleware" clearable placeholder="选择中间件服务">
              <el-checkbox v-for="app in msgMiddleWareList" :key="app.label" :label="app.value">{{ app.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="数据库" prop="db">
            <el-checkbox-group v-model="ruleForm.db" clearable placeholder="选择中间件服务">
              <el-checkbox v-for="app in dbList" :key="app.label" :label="app.value">{{ app.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-card>
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span><b>资源配置</b></span>
        </div>
        <div>
          <el-form-item label="前端/vue" prop="resources_frontend">
            <el-select v-model="ruleForm.resources.frontend" clearable placeholder="前端配置">
              <el-option
                v-for="item in resourceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="后端/tomcat" prop="resources_backend">
            <el-select v-model="ruleForm.resources.backend" clearable placeholder="后端配置">
              <el-option
                v-for="item in resourceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-card>
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span><b>域名配置</b></span>
        </div>
        <el-form-item label="内部域名" prop="domain_internal">
          <el-switch v-model="ruleForm.domain.internal" />
        </el-form-item>
        <el-form-item label="外部域名" prop="domain_internal">
          <el-switch v-model="ruleForm.domain.public_enable" />
        </el-form-item>

        <template v-if="ruleForm.domain.public_enable">
          <div>
            <el-form-item label="外部域名" prop="domain_public">
              <el-input v-model="ruleForm.domain.public" clearable autocomplete="off" style="width: 300px" />
            </el-form-item>
          </div>
        </template>

      </el-card>
      <el-card shadow="never">
        <div>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-card>

    </el-form>
  </div>
<!--  <el-dialog :visible.sync="dialogVisible" title="资源申请审批" width="750px" >-->

<!--  </el-dialog>-->
</template>

<script>
import { createApprove } from '@/api/approve/apply'
import {createConfirmApprove } from "@/api/approve/confirm"

export default {
  name: 'ApplyForm',
  data() {
    return {
      ruleForm: {
        app: [],
        cache: [],
        msg_middleware: [],
        db: [],
        env: '',
        resources: {
          backend: null,
          frontend: null
        },
        domain: {
          internal: false,
          public_enable: false,
          public: null
        },
        app_name: {
          frontend: null,
          backend: null

        }
      },
      rules: {
        instance_name: [{ required: true, trigger: 'blur', message: '必填参数' }],
        apply_member: [{ required: true, trigger: 'blur', message: '必填参数' }],
        responsible_member: [{ required: true, trigger: 'blur', message: '必填参数' }],
        env: [{ required: true, trigger: 'blur', message: '必填参数' }],
        zone: [{ required: true, trigger: 'blur', message: '必填参数' }],
        app: [{ required: true, trigger: 'blur', message: '必填参数' }]

      },
      resourceList: [
        {
          value: null,
          label: '无'
        },
        {
          value: "standard",
          label: '标准'
        },
        {
          value: "low",
          label: '低配'
        },
        {
          value: "high",
          label: '高配'
        }
      ],
      envList: [
        {
          value: 'dev',
          label: 'dev'
        },
        {
          value: 'uat',
          label: 'uat'
        },
        {
          value: 'prep',
          label: 'prep'
        },
        {
          value: 'prod',
          label: '生产'
        }

      ],
      dbList: [
        {
          value: 'mysql',
          label: 'mysql'
        },
        {
          value: 'oracle',
          label: 'oracle'
        },
        {
          value: 'sqlserver',
          label: 'sqlserver'
        }
      ],
      msgMiddleWareList: [
        {
          value: 'rabbitmq',
          label: 'rabbitmq'
        },
        {
          value: 'kafka',
          label: 'kafka'
        }
      ],
      cacheList: [
        {
          value: 'redis',
          label: 'redis'
        },
        {
          value: 'other',
          label: 'other'
        }
      ],
      appList: [
        {
          value: 'vue',
          label: '前端/vue'
        },
        {
          value: 'tomcat',
          label: '后端/tomcat'
        }
      ]
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)

          const approveFrom = this.ruleForm
          createApprove(approveFrom).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '申请已提交',
                type: 'success'
              })
              console.log(res.data.id)
              let confirmObj={
                "approve_id" : res.data.id
              }
              createConfirmApprove(confirmObj).then(res=>{
                console.log('createConfirmApprove')
              })
              this.resetForm('ruleForm')
            }
            console.log('提交正常')
          })
        } else {
          this.$message({
            message: '参数错误',
            type: 'warning'
          })
          return false
        }
      })
    },
    resetForm(formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
